import React from 'react';
import {Row, Col, Form, Select, Card, Icon, Button} from 'antd';
import axios from '../../components/Engineering/axios'
import SearchInput from '../../components/EfficientPackage/auto-search'

const {Option, OptGroup} = Select;
const {Item: FormItem} = Form;


const provinceData = ['Zhejiang', 'Jiangsu'];
const cityData = {
  Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
  Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
};

class SelectForm extends React.Component {
  state = {
    data: [],
    keywords: 'jack',
    selectedItems: [],
    insuranceCurrencyList: [],
    citiesData: cityData[provinceData[0]],
    secondCityData: cityData[provinceData[0]][0],

    provinceList: [],
    citysList: [],
    districtList: [],
    streetsList: [],
    province: '',
    city: '',
    district: '',
    street: '',
  };

  componentDidMount() {
    axios.ajax({url: '/api/allCurrency'}).then(res => {
      res.content && this.setState({
        insuranceCurrencyList: res.content.list
      })
    })


    axios.ajax({url: `/provinces`}).then(res => {
      res.content &&
      this.setState({
          provinceList: res.content,
        }, () => {
          console.log(this.state.provinceList, '打印省市的名字')
        },
      )
    })
  }

  render() {
    const {getFieldDecorator} = this.props.form
    const {selectedItems} = this.state;
    const children = [];
    const formItemLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 4},

      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      }
    }
    
    for (let i = 10; i < 36; i++) {
      children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
    }


    return (
      <>
        <Form layout="horizontal" labelAlign="left">

          <FormItem label="1.带搜索框" {...formItemLayout}>
            {getFieldDecorator("带搜索框", {
              initialValue: this.state.keywords,
            })(
              <Select
                showSearch
                placeholder="请选择人物"
                optionFilterProp="children"
                // onChange={onChange}
                // onFocus={onFocus}
                // onBlur={onBlur}
                // onSearch={onSearch}
                filterOption={(input, option) =>
                  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
              >
                {[{value: 'Jack'}, {value: 'Lucy'}, {value: 'Tom'},].map(item => <Option
                  value={item.value}>{item.value}</Option>)}
              </Select>,
            )}
          </FormItem>


          <FormItem label="2.远程请求数据带搜索框" {...formItemLayout}>
            {getFieldDecorator("远程请求数据带搜索框", {
              initialValue: this.state.keywords,
            })(
              <Select
                showSearch
                placeholder="请选择币种"
                optionFilterProp="children"
                // onChange={onChange}
                // onFocus={onFocus}
                // onBlur={onBlur}
                // onSearch={onSearch}
                filterOption={(input, option) =>
                  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
              >
                {this.state.insuranceCurrencyList.map(item => <Option
                  value={item.currencyName}>{item.currencyDesc}</Option>)}
              </Select>,
            )}
          </FormItem>


          <FormItem label="3.搜索和远程数据结合" {...formItemLayout}>
            {getFieldDecorator("搜索和远程数据结合", {
              placeholder: "请输入要查询的信息",
              initialValue: this.state.SearchInputField,
            })(
              <SearchInput url="https://suggest.taobao.com/sug" onChange={value => {
                this.setState({SearchInputField: value});
                alert(value)
              }}/>
            )}
          </FormItem>


          <FormItem label="5.用 OptGroup 进行选项分组" {...formItemLayout}>
            {getFieldDecorator("select31", {
              initialValue: "jack",
            })(
              <Select
                // defaultValue={['jack']}
              >
                <OptGroup label="Manager">
                  <Option value="jack">Jack</Option>
                  <Option value="lucy">Lucy</Option>
                </OptGroup>
                <OptGroup label="Engineer">
                  <Option value="Yiminghe">yiminghe</Option>
                </OptGroup>
              </Select>
            )}
          </FormItem>


          <FormItem label="5.多选，从已有条目中选择。" {...formItemLayout}>
            {getFieldDecorator("select3", {
              initialValue: ['a10', 'c12'],
            })(
              <Select
                mode="multiple"
                placeholder="Please select"
                allowClear
                // defaultValue={['a10', 'c12']}
              >
                {children}
              </Select>,
            )}
          </FormItem>


          <FormItem label="6.随意输入的内容（scroll the menu）" {...formItemLayout}>
            {getFieldDecorator("select4", {
              initialValue: ['a10', 'c12'],
              validateFirst: true,   //todo 当某一规则校验不通过时，是否停止剩下的规则的校验
            })(
              <Select mode="tags" placeholder="Tags Mode" allowClear>
                {children}
              </Select>,
            )}
          </FormItem>


          <FormItem label="7.定制回填内容" {...formItemLayout}>
            {getFieldDecorator("select5", {
              initialValue: ['china'],
            })(
              <Select
                mode="multiple"
                style={{width: '100%'}}
                placeholder="select one country"
                optionLabelProp="label"
                allowClear
                // defaultValue={['china']}
              >
                <Option value="china" label="China">
                  <span role="img" aria-label="China">🇨🇳 </span>China (中国)
                </Option>
                <Option value="usa" label="USA">
                  <span role="img" aria-label="USA">🇺🇸 </span>USA (美国)
                </Option>
              </Select>,
            )}
          </FormItem>


          <FormItem label="8.隐藏下拉列表中已选择的选项" {...formItemLayout}>
            {getFieldDecorator("select6", {
              initialValue: ['china'],
            })(
              <Select
                mode="multiple"
                placeholder="Inserted are removed"
                allowClear
                // value={selectedItems}
                onChange={selectedItems => {
                  this.setState({selectedItems})
                }
                }
              >
                {['Apples', 'Nails', 'Bananas', 'Helicopters'].filter(o => !selectedItems.includes(o)).map(item => (
                  <Select.Option key={item} value={item}>
                    {item}
                  </Select.Option>
                ))}
              </Select>
            )}
          </FormItem>


          <FormItem label="9.省市联动是典型的例子" {...formItemLayout}>
            {getFieldDecorator("省市联动是典型的例子", {
              initialValue: '',
            })(
              <>
                <Select
                  defaultValue={provinceData[0]}
                  style={{width: 200}}
                  onChange={(value) => {
                    this.setState({citiesData: cityData[value], secondCityData: cityData[value][0],})
                  }}
                >
                  {provinceData.map(province => (
                    <Option key={province}>{province}</Option>
                  ))}
                </Select>

                <Select
                  style={{width: 200, marginLeft: 20}}
                  value={this.state.secondCityData}
                  onChange={value => {
                    this.setState({secondCityData: value,});
                  }}
                >
                  {this.state.citiesData.map(city => (<Option key={city}>{city}</Option>))}
                </Select>
              </>
            )}
          </FormItem>


          <FormItem label="10.远程动态数据省市联动" {...formItemLayout}>
            {getFieldDecorator("远程动态数据省市联动", {
              initialValue: '',
            })(
              <>
                {getFieldDecorator('areaCode', {
                  initialValue: '',
                })(
                  <Row type="flex" gutter={16}>
                    <Col xs={24} md={8}>
                      <Select
                        showSearch
                        placeholder=""
                        value={this.state.province}
                        optionFilterProp="children"
                        filterOption={(input, option) =>
                          option.props.children.toLowerCase().indexOf(input.toLowerCase()) >=
                          0
                        }
                        onChange={(value, option) => {
                          this.setState({
                            province: value,
                            city: '',
                            district: '',
                            street: '',
                            streetsList: [],
                          });
                          axios
                            .ajax({
                              url: `/citys`,
                              params: {provinceCode: value},
                            })
                            .then(res => {
                              res.content &&
                              this.setState({
                                citysList: res.content,
                              });
                            });
                        }}
                      >
                        {this.state.provinceList.map(item => (
                          <Option value={item.proviceCode}>{item.provinceName}</Option>
                        ))}
                      </Select>
                    </Col>

                    <Col xs={24} md={8}>
                      <Select
                        showSearch
                        value={this.state.city}
                        placeholder=""
                        optionFilterProp="children"
                        filterOption={(input, option) =>
                          option.props.children.toLowerCase().indexOf(input.toLowerCase()) >=
                          0
                        }
                        onChange={(value, option) => {
                          this.setState({
                            city: value,
                            district: '',
                            street: '',
                          });
                          axios
                            .ajax({
                              url: `/districts?cityCode=${value}`,
                            })
                            .then(res => {
                              res.content &&
                              this.setState({
                                districtList: res.content,
                              });
                            });
                        }}
                      >
                        {this.state.citysList.map(item => (
                          <Option value={item.cityCode}>{item.cityName}</Option>
                        ))}
                      </Select>
                    </Col>

                    <Col xs={24} md={8}>
                      <Select
                        showSearch
                        value={this.state.district}
                        placeholder=""
                        optionFilterProp="children"
                        filterOption={(input, option) =>
                          option.props.children.toLowerCase().indexOf(input.toLowerCase()) >=
                          0
                        }
                        onChange={(value, option) => {
                          this.setState({district: value, street: ''});
                          axios
                            .ajax({
                              url: `/streets/${value}?districtCode=${value}`,
                            })
                            .then(res => {
                              res.content &&
                              this.setState({
                                streetsList: res.content,
                              });
                            });
                        }}
                      >
                        {this.state.districtList.map(item => (
                          <Option value={item.districtCode}>{item.districtName}</Option>
                        ))}
                      </Select>
                    </Col>

                    {this.state.streetsList.length > 0 ? (
                      <Col xs={24} md={8}>
                        <Select
                          showSearch
                          value={this.state.street}
                          placeholder=""
                          optionFilterProp="children"
                          filterOption={(input, option) =>
                            option.props.children
                              .toLowerCase()
                              .indexOf(input.toLowerCase()) >= 0
                          }
                          onChange={(value, option) => {
                            this.setState({street: value});
                          }}
                        >
                          {this.state.streetsList.map(item => (
                            <Option value={item.streetsCode}>{item.streetsName}</Option>
                          ))}
                        </Select>
                      </Col>
                    ) : null}
                  </Row>,
                )}
              </>
            )}
          </FormItem>


          <Button onClick={() => {
            console.log(this.props.form.getFieldsValue());
            console.log(this.SearchInputForm)
          }}>确定</Button>
        </Form>
      </>
    );
  }
}

const WrappedSelectForm = Form.create({name: 'SelectForm1'})(SelectForm)

// export default props=> <>
// <Card title="搜索和远程数据结合">
// <WrappedSelectForm placeholder="请输入要查询的信息" style={{ width: 200 }}  wrappedComponentRef={(form) => props.form = form} />
// </Card>
// </>

export default class WrappedSeart extends React.Component {
  render() {
    return <Card title="Select 选择" style={{marginTop: 10}}>
      <WrappedSelectForm placeholder="请输入要查询的信息" style={{}} wrappedComponentRef={(form) => this.form = form}/>
    </Card>
  }
}


// Select props
// 参数	                       说明	          类型	           默认值	        版本
// allowClear	               支持清除	    boolean	false
// autoClearSearchValue	       是否在选中项后清空搜索框，只在 mode 为 multiple 或 tags 时有效。	boolean	true	3.10.0
// autoFocus	               默认获取焦点	boolean	false
// defaultActiveFirstOption	   是否默认高亮第一个选项。	boolean	true
// defaultValue	               指定默认选中的条目	string|string[] number|number[] LabeledValue|LabeledValue[]
// disabled	                   是否禁用	boolean	false
// dropdownClassName	       下拉菜单的 className 属性	string	-
// dropdownMatchSelectWidth	   下拉菜单和选择器同宽	boolean	true
// dropdownRender	           自定义下拉框内容	(menuNode: ReactNode, props) => ReactNode	-	3.11.0
// dropdownStyle	           下拉菜单的 style 属性	object	-
// filterOption	               是否根据输入项进行筛选。当其为一个函数时，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false。	boolean or function(inputValue, option)	true
// firstActiveValue	           默认高亮的选项	string|string[]	-
// getPopupContainer	       菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。示例	Function(triggerNode)	() => document.body
// labelInValue	               是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 string 变为 {key: string, label: ReactNode} 的格式	boolean	false
// maxTagCount	               最多显示多少个 tag	number	-
// maxTagTextLength	           最大显示的 tag 文本长度	number	-	3.18.0
// maxTagPlaceholder	       隐藏 tag 时显示的内容	ReactNode/function(omittedValues)	-
// mode	                       设置 Select 的模式为多选或标签	'multiple' | 'tags'	-
// notFoundContent	           当下拉列表为空时显示的内容	string	'Not Found'
// optionFilterProp	           搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索。示例	string	value
// optionLabelProp	           回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 value。	string	children （combobox 模式下为 value）
// placeholder	               选择框默认文字	string	-
// showArrow	               是否显示下拉小箭头	boolean	true	3.2.1
// showSearch	               使单选模式可搜索	boolean	false
// size	                       选择框大小，可选 large small	string	default
// suffixIcon	               自定义的选择框后缀图标	ReactNode	-	3.10.0
// removeIcon	               自定义的多选框清除图标	ReactNode	-	3.11.0
// clearIcon	               自定义的多选框清空图标	ReactNode	-	3.11.0
// menuItemSelectedIcon	       自定义多选时当前选中的条目图标	ReactNode	-	3.11.0
// tokenSeparators	           在 tags 和 multiple 模式下自动分词的分隔符	string[]
// value	                   指定当前选中的条目	string|string[] number|number[] LabeledValue|LabeledValue[]
// onBlur	                   失去焦点时回调	function
// onChange	                   选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数	function(value, option:Option/Array<Option>)	-
// onDeselect	               取消选中时调用，参数为选中项的 value (或 key) 值，仅在 multiple 或 tags 模式下生效	function(string|number|LabeledValue)	-
// onFocus	                   获得焦点时回调	function	-
// onInputKeyDown	           按键按下时回调	function	-	3.1.0
// onMouseEnter	               鼠标移入时回调	function	-
// onMouseLeave	               鼠标移出时回调	function	-
// onPopupScroll	           下拉列表滚动时的回调	function	-
// onSearch	                   文本框值变化时回调	function(value: string)
// onSelect	                   被选中时调用，参数为选中项的 value (或 key) 值	function(string|number|LabeledValue, option:Option)	-
// defaultOpen	               是否默认展开下拉菜单	boolean	-	3.9.3
// open	                       是否展开下拉菜单	boolean	-	3.9.0
// onDropdownVisibleChange	   展开下拉菜单的回调 (3.9.0 后支持)	function(open)	-	3.9.0
// loading	                   加载中状态
// 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 getPopupContainer={triggerNode => triggerNode.parentElement} 将下拉弹层渲染节点固定在触发器的父元素中。


// Select Methods#
// blur()	取消焦点
// focus()	获取焦点

// Option props#
// disabled	    是否禁用	boolean	false
// key	        和 value 含义一致。如果 React 需要你设置此项，此项值与 value 的值相同，然后可以省略 value 设置	string
// title	    选中该 Option 后，Select 的 title	string	-
// value	    默认根据此属性值进行筛选	string|number	-
// className	Option 器类名	string	-	3.10.1

// OptGroup props#
// key		string	-
// label	组名	string|React.Element	无
